import BlogUtils from '../MyBlog/LeftContainer/Utils';
import AttentionTool from './AttentionTool';
import NewAttentionTool from './NewAttentionTool';
import { Tabs,message, Spin } from 'antd';
import TopSearchPanel from '../MyBlog/RightContainer/Weibo/TopSearchPanel';
import AttentionApi from '../../apis/myAttention';
import weaBlogDict from '../Component/wea-blog-dict';
import HisAttentions from './His/HisAttentions';
import HisFans from './His/HisFans';
import HisWeibo from './His/HisWeibo';
import HisReport from './His/HisReport';
import WeaUtils from '../Component/wea-utils/';
import {WeaNewScroll, WeaAlertPage ,WeaAvatar} from 'ecCom';
import {inject, observer} from 'mobx-react';
import {observable,action,toJS} from 'mobx';

import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

const RangeStar = BlogUtils.RangeStar;
const TabPane = Tabs.TabPane;
const innerHref = weaBlogDict.href;
@inject('blogMyAttention')
@observer
class HisWeiboContainer extends React.Component {
	constructor(props) {
		super(props);
		let funcs = ['search', 'switchTab', 'getBlogInfo'];
		funcs.forEach((func) => this[func] = this[func].bind(this));
		this.state = {
			showSearch: true,
			blogInfo: undefined,
			index: undefined
		};
	}
	componentDidMount() {
		this.getBlogInfo();
	}
	componentWillReceiveProps(nextProps) {
		let {status} = this.props.blogMyAttention;
		let {userId} = toJS(status);
		this.setState({
			blogInfo:undefined,
			index: undefined
		}, () => this.getBlogInfoByUserId(userId));
	}
	getBlogInfo() {
		this.getBlogInfoByUserId(this.props.userId);
	}


	addSpecialUser = () => {
        AttentionApi.addSpecialUsers({specids:this.state.blogInfo.userId}).then((result) => {

            let data = Object.assign({}, this.state.blogInfo, { specialStatus: '2'})
            this.setState({
                blogInfo: data
            })
		})
	}

	cancelSpecialUser = () => {
        AttentionApi.cancelSpecialUsers({specids:this.state.blogInfo.userId}).then((result) => {
            let data = Object.assign({}, this.state.blogInfo, { specialStatus: '1'})
            this.setState({
                blogInfo: data
            })
        })
	}




	getBlogInfoByUserId(userId) {
		if (!userId) return;
		AttentionApi.getBlogPersonalInfo({blogId: userId}).then((result) => {
			this.setState({blogInfo:result});
            if (this.props.changeTitle) {
                document.title = result.username + getLabel('384490',"的微博");
            }
            // 有权限展示时才显示指数
            if (result.viewStatus > 0) {
                AttentionApi.getBlogWorkIndex({blogId: userId}).then((result) => {
                    this.setState({index: result})
                }).catch(error => message.error(error));
            }
		}).catch(error => message.error(error));
	}
	search (params){
	    params.startDate = WeaUtils.DateFormat(params.startDate, 'yyyy-MM-dd');
        params.endDate = WeaUtils.DateFormat(params.endDate, 'yyyy-MM-dd');
		params.searching = true;
        this.refs.weibo.wrappedInstance.search(params);
	}
	
	switchTab(key) {
	    let showSearch = key === '1';
		this.setState({
			showSearch: showSearch
		});
        if (showSearch) {
            this.refs.weibo.wrappedInstance.search({searching: false});
        }
	}
	render() {

		let blogInfo = this.state.blogInfo;
		if (!blogInfo)
			return (
				<div className="align-center top40">
					<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@v519gs`} size="large"></Spin>
				</div>);
		else if (blogInfo.viewStatus == -1)
			return (
            <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@b0a5ds`}>
				<div className="color-black">
					{getLabel('384491',"你当前不具有对")}
					<a href={innerHref.user(blogInfo.userId)} target="_blank">{blogInfo.username}</a>
					{getLabel('384492',"工作微博的查看权限，请联系对方将微博分享给你！")}
				</div>
            </WeaAlertPage>
			);
		else if (blogInfo.viewStatus == 0)
			return (
                <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@51fduy`}>
                    <div className="color-black">
						{getLabel('384491',"你当前不具有对")}
                        <a href={innerHref.user(blogInfo.userId)} target="_blank">{blogInfo.username}</a>
                        {getLabel('384493',"工作微博的查看权限，请联系对方将微博分享给你，或向他发关注申请！")}
                    </div>
                    <div className="msgTool">
                        <AttentionTool ecId={`${this && this.props && this.props.ecId || ''}_AttentionTool@ba8i9f`} isreceive={blogInfo.isreceive} attentionStatus={blogInfo.attentionStatus} islower={blogInfo.islower} userId={blogInfo.userId} callback={this.getBlogInfo}/>
                    </div>
                </WeaAlertPage>
			);
        
		let {mood, schedule, work} = this.state.index || {};
		let he = blogInfo.sex === '0' ? getLabel('384494',"他") : getLabel('384495',"她");
        let isMe = blogInfo.currentUserId == this.props.userId;
        let isShowSpe = blogInfo.attentionStatus == '1'|| blogInfo.attentionStatus=='2';
        if (isMe)
            he = getLabel('130758',"我");

        const style = {
            width: 72,
            height: 72,
            display: "inline-block"
        };
		return (
			<div className="hisWeiboContainer">
				<div>
					<div className="panel align-center">
						<div className="user">
							<div className="userImg">
								<a href={innerHref.user(blogInfo.userId)} target="_blank">
									<span style={style}>
								<WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@r6eqfl`} userId={blogInfo.userId}/>
									</span>
								</a>
							</div>
							<div className="userInfo text-elli">
								<div><a href={innerHref.user(blogInfo.userId)} target="_blank">{blogInfo.username}</a></div>
								<div className="deptName"><a href={innerHref.dept(blogInfo.deptId)} target="_blank">{blogInfo.deptName}</a></div>
                                {isMe||<AttentionTool ecId={`${this && this.props && this.props.ecId || ''}_AttentionTool@kpyyzk`} isreceive={blogInfo.isreceive} attentionStatus={blogInfo.attentionStatus} specialStatus={blogInfo.specialStatus} islower={blogInfo.islower} userId={blogInfo.userId} callback={this.getBlogInfo}/>
                                }
                                {isShowSpe&&<NewAttentionTool ecId={`${this && this.props && this.props.ecId || ''}_NewAttentionTool@6ddw20`}  isreceive={blogInfo.isreceive}  addSpecialUser={this.addSpecialUser} cancelSpecialUser={this.cancelSpecialUser}  specialStatus={blogInfo.specialStatus} attentionStatus={blogInfo.attentionStatus} islower={blogInfo.islower} userId={blogInfo.userId} callback={this.getBlogInfo} />
                                }

							</div>
						</div>
					</div>

					<div className="panel align-center" style={{"float":"right"}}>
						<div className="contact">
							<div>{getLabel('596',"上级")}：<a className="info" href={innerHref.user(blogInfo.managerId)} target="_blank">{blogInfo.managerName}</a></div>
							<div>{getLabel('421',"电话")}：<span className="info">{blogInfo.telephone}</span></div>
							<div>{getLabel('422',"手机")}：<span className="info">{blogInfo.mobilePhone}</span></div>
						</div>
					</div>
                    <div className="panel align-center"  style={{"float":"right"}}>
                        <div className="verLine" />
                        {this.state.index ?
                            <div className="index">
                                {work && <div><RangeStar ecId={`${this && this.props && this.props.ecId || ''}_RangeStar@7u7c12`} name={work.name} tip={work.workIndexTitle} value={work.workIndex}/></div>}
                                {mood && <div><RangeStar ecId={`${this && this.props && this.props.ecId || ''}_RangeStar@7r8r7n`} name={mood.name} tip={mood.moodIndexTitle} value={mood.moodIndex}/></div>}
                                {schedule && <div><RangeStar ecId={`${this && this.props && this.props.ecId || ''}_RangeStar@lqfofg`} name={schedule.name} tip={schedule.scheduleTitle} value={schedule.scheduleIndex}/></div>}
                            </div> :
                            <div className="index" style={{textAlign: 'center'}}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@f9422f`} size="large" /></div>
                        }
                    </div>
				</div>
				<div className="downTab">
					<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@12hvpf`} animated={false} defaultActiveKey="1" onChange={this.switchTab} size="small"
						  tabBarExtraContent={this.state.showSearch && <TopSearchPanel ecId={`${this && this.props && this.props.ecId || ''}_TopSearchPanel@xc5ag6`} requestData={this.search}/>}
					>
						<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@wtrs8l`} tab={`${he}`+getLabel('384490',"的微博")+`(${blogInfo.blogCount})`} key="1">
                            <HisWeibo ecId={`${this && this.props && this.props.ecId || ''}_HisWeibo@o1n89q`} ref="weibo" tab={this.props.tab} userId={blogInfo.userId} currentUserId={blogInfo.currentUserId} key={blogInfo.userId}/>
						</TabPane>
						<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@x9ic29`} tab={`${he}`+getLabel('384496',"的报表")} key="2">
                            <HisReport ecId={`${this && this.props && this.props.ecId || ''}_HisReport@7iax3s`} userId={blogInfo.userId} title={`${he}`+getLabel('384496',"的报表")}/>
						</TabPane>
						<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@i7e6nj`} tab={`${he}`+getLabel('384497',"的关注")+`(${blogInfo.myAttentionCount})`} key="3">
                            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@07smc3`}>
                                <HisAttentions ecId={`${this && this.props && this.props.ecId || ''}_HisAttentions@9m2umn`} userId={blogInfo.userId}/>
                            </WeaNewScroll>
						</TabPane>
						<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@028jit`} tab={`${he}`+getLabel('384498',"的粉丝")+`(${blogInfo.attentionMeCount})`} key="4">
                            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@uv5dkn`}>
							    <HisFans ecId={`${this && this.props && this.props.ecId || ''}_HisFans@3gryfr`} userId={blogInfo.userId}/>
                            </WeaNewScroll>
						</TabPane>
					</Tabs>
				</div>
			</div>
		);
	}
};

export default HisWeiboContainer;